<template>
  <div class="bottom ft_PingFangSC">
    <p class="subTitle">白蚁防治</p>
    <div class="content">
      <div v-for="(item,index) in data" :key="index" class="data">
        <p class="number">
          <!-- {{item.value.toFixed(2)}} -->
          <countTo :endVal="item.value" />
        </p>
        <p>{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RightBottom",
  data: () => {
    return {
      data: [
        { name: "防治面积(m²)", value: 0 },
        { name: "申请白蚁防治小区数量(户)", value: 0 },
        { name: "喷洒量(m²)", value: 0 }
      ]
    };
  },
  methods: {
    getData() {
      const _self = this;
      this.http
        .post("", {
          path: "ov",
          groupid: 27
        })
        .then(res => {
          if (!(Object.getOwnPropertyNames(res.data) == 0 || res.data == "")) {
            const { fdc_byfz_fzmj, fdc_byfz_psl, fdc_byfz_sqxqsl } = res.data;
            _self.data = [
              { name: "防治面积(m²)", value: fdc_byfz_fzmj },
              { name: "申请白蚁防治小区数量(户)", value: fdc_byfz_sqxqsl },
              { name: "喷洒量(m²)", value: fdc_byfz_psl }
            ];
          }
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.bottom {
  padding: 1.2rem 0;
  .content {
    width: 41.84rem;
    height: 18.69rem;
    margin-left: 3rem;
    position: relative;
    background: url("../../../assets/background/estate/bg_Ant.png") no-repeat
      center;
    background-size: 100% 100%;
    .data {
      width: 10.92rem;
      height: 5.69rem;
      color: #bed7fa;
      font-size: 1.077rem;
      padding: 0.8rem 1rem;
      line-height: 1.2em;
      position: absolute;
      .number {
        font-size: 1.85rem;
        line-height: 1.2em;
        color: #fff;
      }
      &:first-of-type {
        top: 5rem;
      }
      &:nth-of-type(2) {
        top: 1.5rem;
        right: 0;
      }
      &:last-of-type {
        bottom: 0rem;
        right: 3.5rem;
      }
    }
  }
}
</style>